<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>日语五十音图</title>
  </head>
  <body>
    
    <svg>
      <filter id="chalk">
        <feTurbulence
          result="T"
          numOctaves="3"
          seed="0"
          type="fractalNoise"
          baseFrequency=".4"
        />
        <feDisplacementMap
          in2="T"
          scale="5"
          xChannelSelector="R"
          yChannelSelector="G"
          in="SourceGraphic"
        />
      </filter>
    </svg>
    
    <main>      
      <div class="jp-grid"></div>
    </main>
    <script>
   
     
      const data = [
        ['あ','ア','a'],
        ['い','イ','i'],
        ['う','ウ','u'],
        ['い','イ','i'],
        ['え','エ','e'],
        ['お','オ','o'],
        ['か','カ','ka'],
        ['き','キ','ki'],
        ['く','ク','ku'],
        ['け','ケ','ke'],
        ['こ','コ','ko'],
        ['さ','サ','sa'],
        ['し','シ','shi'],
        ['す','ス','su'],
        ['せ','セ','se'],
        ['そ','ソ','so'],
        ['た','タ','ta'],
        ['ち','チ','chi'],
        ['つ','ツ','tsu'],
        ['て','テ','te'],
        ['と','ト','to'],
        ['な','ナ','na'],
        ['に','ニ','ni'],
        ['ぬ','ヌ','nu'],
        ['ね','ネ','ne'],
        ['の','ノ','no'],
        ['は','ハ','ha'],
        ['ひ','ヒ','hi'],
        ['ふ','フ','fu'],
        ['へ','ヘ','he'],
        ['ほ','ホ','ho'],
        ['ま','マ','ma'],
        ['み','ミ','mi'],
        ['む','ム','mu'],
        ['め','メ','me'],
        ['も','モ','mo'],
        ['や','ヤ','ya'],
        ['い','イ','i'],
        ['ゆ','ユ','yu'],
        ['え','エ','e'],
        ['よ','ヨ','yo'],
        ['ら','ラ','ra'],
        ['り','リ','ri'],
        ['る','ル','ru'],
        ['れ','レ','re'],
        ['ろ','ロ','ro'],
        ['わ','ワ','wa'],
        ['ん','ン','n'],
       
      ];

      const addCard = template();

      data.forEach(v=>{
        addCard(v);
      })

      document.querySelector(".jp-grid").innerHTML = addCard();
  

      function template(){
        let i=0;
        let html="";
        let row = ['<div class="row">','</div>'];
        const insertCard = d => row.splice(row.length-1,0,d) && row.join('');
        
        return function addCard(data){
          if(!data) return html + row.join('');
          let proCardWrapper = `
          <div class="pro-card-wrapper">
            <!-- 控制前、后翻转 -->
            <div class="pro-card">
              <!-- 平假名 -->
              <div class="hiragana">
                <div class="character">${data[0]}</div>
                <div class="romaji">${data[2]}</div>
              </div>
              <!-- 片假名 -->
              <div class="katakana">
                <div class="character">${data[1]}</div>
                <div class="romaji">${data[2]}</div>
              </div>
            </div>
          </div>`;

          if(i===4) {
            i = 0;
            html += insertCard(proCardWrapper);
            row =  ['<div class="row">','</div>'];
          };
          i++;
          return html + insertCard(proCardWrapper);
        }
      }
      
    </script>
  </body>
</html>
